<template>
  <div class="social-analytics-container">
    <!-- 动态显示平台图标和名称 -->
    <div class="platform-header">
      <div class="platform-icon">
        <!-- 动态加载平台图标，需根据平台名匹配图标路径 -->
        <img
          :src="platformIcon"
          alt="Platform Icon"
          class="platform-icon-img"
        />
      </div>
      <div class="platform-name">{{ platform }}</div>
    </div>

    <el-table
      :data="influencers"
      style="width: 100%"
      fit
      :header-cell-style="headerStyle"
      :cell-style="cellStyle"
    >
      <el-table-column
        prop="username"
        label="Username"
        :min-width="100"
        class-name="username-column"
      />

      <el-table-column
        prop="followers"
        label="# of followers"
        :min-width="110"
        class-name="follower-count-column"
      >
        <template #default="scope">
          <!-- 格式化粉丝数为千位分隔符 -->
          {{ scope.row.followers | formatNumber }}
        </template>
      </el-table-column>

      <el-table-column
        prop="sentiment"
        label="Sentiments"
        :min-width="100"
        class-name="sentiment-column"
      >
        <template #default="scope">
          <span>
            {{ scope.row.sentiment }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    platform: {
      type: String,
      required: true,
    },
    platformIcon: {
      // 新增图标 props
      type: String, // 或 String，根据图标引用方式调整
      required: true,
    },
    influencers: {
      // 影响者数据数组
      type: Array,
      default: () => [],
    },
  },
  filters: {
    // 粉丝数格式化过滤器
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
  data() {
    return {
      headerStyle: {
        background: "#fff",
        color: "#232323",
        fontWeight: "600",
        textAlign: "left",
        fontSize: "14px",
        height: "33px",
        lineHeight: "33px",
      },
      cellStyle: {
        textAlign: "left",
        color: "#454545",
        fontSize: "13px",
        height: "33px",
        lineHeight: "33px",
        padding: "8px 0",
        // border: "none",
        // // 确保背景色与容器一致
        // backgroundColor: "transparent",
      },
    };
  },
  methods: {
    getSentimentClass(sentiment) {
      /* 保持不变 */
    },
    // 根据情感值获取颜色类（可选功能）
    // getSentimentClass(sentiment) {
    //   const value = Number(sentiment);
    //   if (value >= 1 && value <= 3) return "sentiment-red";
    //   if (value >= 4 && value <= 6) return "sentiment-yellow";
    //   if (value >= 7 && value <= 10) return "sentiment-green";
    //   return "";
    // },
  },
};
</script>

<style scoped lang="scss">
.social-analytics-container {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.platform-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .platform-icon {
    width: 36px;
    height: 36px;
    margin-right: 16px;
    .platform-icon-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .platform-name {
    font-size: 14px;
    font-weight: 400;
    color: #454545;
  }
}
::v-deep .el-table__body {
  // 移除所有行的默认边框（包括表头和表体）
  border-bottom: none !important;

  // 为除最后一行外的所有行添加下边框
  tr:not(:last-child) {
    td,
    th {
      border-bottom: 1px solid #ebeef5 !important; // 自定义分隔线颜色
    }
  }

  // 确保最后一行完全无边框
  tr:last-child {
    td,
    th {
      border-bottom: none !important;
    }
  }
}

/* 情感颜色样式（需与 methods 中的类名对应） */
.sentiment-red {
  color: #ff4d4f;
}
.sentiment-yellow {
  color: #ffc53d;
}
.sentiment-green {
  color: #37c67f;
}
</style>
